<template>
	<view class="orderCounter u-skeleton">

		<u-skeleton 
			:loading="loading" 
			:animation="true" 
			bgColor="#FFF"
		></u-skeleton>

		<div class="header flexStyle flexColumn">
			<div class="t t1 flexStyle">
				<div class="name u-skeleton-fillet">
					交易剩余时间
				</div>
				<div v-if="orderData.diff_count_down>=0" class="u-skeleton-fillet">
					<u-count-down 
						ref="uCountDown" 
						:timestamp="orderData.diff_count_down" 
						format="mm:ss"
						color="#9f9f9f"
						@end="countDownEnd"
					></u-count-down>
				</div>
			</div>

			<div class="t t2 flexStyle">
				<div class="moneyBox flexStyle u-skeleton-fillet">
					<div class="moenyT">
						￥
					</div>
					<div class="money">
						{{orderData.order_all_money}}
					</div>
				</div>
			</div>

			<div class="t t3 flexStyle u-skeleton-fillet">
				{{orderData.menu_id[0].menu_name}}
			</div>

		</div>

		<div class="content">
			<div class="cont">
				<div class="title u-skeleton-fillet">
					支付方式
				</div>



				<div class="boxInfo">
					<radio-group @change="radioChange">
						<label 
							class="it flexStyle justifySpaceBetween u-skeleton-fillet" 
						>
							<div class="infoBox flexStyle">
								<image src="~@/static/images/wxPay.png" class="payIcon" />
								<div class="name">
									微信支付
								</div>
							</div>

							<radio value="1" :checked="true" class="myRadio" color="#f37000" />
						</label>
					</radio-group>

				</div>

			</div>
		</div>

		<div class="floatBox confimBox">
			<div class="confimBtn u-skeleton-fillet" @click="startPay">
				确定交易
			</div>
		</div>


	</view>
</template>

<script lang="ts" src="./orderCounter.ts"></script>

<style lang="stylus" scoped>
@import './orderCounter.styl';
</style>
